<template>
<div>
    <h1>在vue中推荐使用axios进行Ajax请求，jquery的Ajax对dom操作太多，基础的又太麻烦，当然还有其他的封装Ajax</h1>
    <h1>先npm i axios,然后在App组件script(主组件)中引入</h1>
    <!-- 跨域的几种解决方法，1.服务器设置允许跨域的响应头，cors解决跨域2.jsonp（只能get）3.代理服务器中转数据，服务器和服务器传递数据不用Ajax，所以同源政策管不到 -->
    <hr>
        <h1>vue-resource是一个vue的插件库它同样可以实现Ajax，它是对xhr的封装，而不是对fetch的封装，插件的使用和普通库不一样，还是推荐axios，因为这个已经没太维护了</h1>
        <h1>首先安装npm i vue-resource,然后在main.js中引入 import 你取的名字 from 'vue-resource'</h1> 
    <hr>
    <!-- vue-cli就能开代理服务器 -->
    <button @click="myMsg">点击我使用axios获取数据</button>
    <button @click = 'myMsg2'>点击我使用vue-resource获取数据</button>
<School></School>
</div>
</template>

<script>
import School from './components/School.vue'
import axios from 'axios'
export default {
    name:'App',
    components:{
        School
    },
    methods:{
        myMsg(){
            axios.get('http://localhost:8000/').then(
                // 名字随便取，第一个是成功，第二个是失败
                res =>{
                    console.log('请求成功',res.data)
                },
                error =>{
                    console.log('请求失败了',error.message)
                }
            )
        },
        myMsg2(){
            this.$http.get('http://localhost:8000/').then(
                // 名字随便取，第一个是成功，第二个是失败
                res =>{
                    console.log('请求成功',res.data)
                },
                error =>{
                    console.log('请求失败了',error.message)
                }
            )
        }
    }
}
</script>


<style>

</style>